let images: any = {};

/**
 * 加载并添加图像到地图样式
 * @param {string} imageName - 图标的名称
 * @param {string} imageUrl - 图标的 URL 或路径
 * @param {Function} callback - 回调函数，在图标加载完成后执行
 */
export function loadAddIcon(map: any, imageName: string | number, imageUrl: any, callback: () => void) {
  if (images[imageName]) {
    console.log(`Image "${imageName}" is already loaded.`);
    if (callback) callback();
    return;
  }
  map.loadImage(imageUrl, (error: any, image: any) => {
    if (error) {
      console.error(`Failed to load image: ${error}`);
      return;
    }

    // 添加图像到地图
    map.addImage(imageName, image);
    images[imageName] = image; // 保存图标信息

    // console.log(`Image "${imageName}" loaded and added to map.`);
    if (callback) callback();
  });
}
/**
 * 获取已加载的图标
 * @param {string} imageName - 图标的名称
 * @returns {object|null} - 返回图标图像对象，未加载则返回 null
 */
export function getIcon(imageName: string | number): object | null {
  return images[imageName] || null;
}
/**
 * 更新已添加的图标
 * @param {string} imageName - 图标的名称
 * @param {string} newImageUrl - 新的图标 URL 或路径
 * @param {Function} callback - 回调函数
 */
export function updateIcon(map: any, imageName: any, newImageUrl: string | number, callback: any) {
  // 删除旧图标
  removeIcon(map, imageName);

  // 加载并添加新的图标
  loadAddIcon(map, imageName, newImageUrl, callback);
}
/**
 * 删除图标
 * @param {string} imageName - 图标的名称
 */
export function removeIcon(map: any, imageName: string | number) {
  if (images[imageName]) {
    map.removeImage(imageName);
    delete images[imageName]; // 删除记录
  } else {
    console.log(`Image "${imageName}" not found.`);
  }
}
/**
 * 清空所有加载的图标
 */
export function clearAllIcons(map: any) {
  for (const imageName in images) {
    if (images.hasOwnProperty(imageName)) {
      map.removeImage(imageName);
    }
  }
  images = {}; // 清空图标记录
  console.log("All images have been removed from the map.");
}

/**
 * 加载精灵图
 */
interface SpriteIconOptions {
  /** X轴偏移量（像素） */
  offsetX?: number;
  /** Y轴偏移量（像素） */
  offsetY?: number;
  /** 是否显示调试边框（红色边框） */
  debugBorder?: boolean;
}

export async function loadSprite(
  map: mapboxgl.Map,
  spriteUrl: string,
  jsonData: Record<string, any>,
  options: SpriteIconOptions = {}
): Promise<void> {
  try {
    // 1. 加载雪碧图图片
    const img = await new Promise<HTMLImageElement>((resolve, reject) => {
      const image = new Image();
      image.crossOrigin = "Anonymous";
      image.src = spriteUrl;

      image.onload = () => resolve(image);
      image.onerror = err => {
        console.error("加载雪碧图图片失败:", spriteUrl, err);
        reject(new Error(`Failed to load sprite image: ${spriteUrl}`));
      };
    });

    // 2. 加载所有图标
    await Promise.all(
      Object.entries(jsonData).map(async ([iconName, iconData]) => {
        const {
          x = 0,
          y = 0,
          width,
          height,
          pixelRatio = 1,
          // 支持单个图标的偏移量覆盖全局设置
          offsetX = options.offsetX || 0,
          offsetY = options.offsetY || 0
        } = iconData;

        // 应用偏移量
        const sourceX = x + offsetX;
        const sourceY = y + offsetY;

        // 边界检查（考虑偏移量）
        if (sourceX < 0 || sourceY < 0 || sourceX + width > img.width || sourceY + height > img.height) {
          throw new Error(`图标 ${iconName} 超出雪碧图边界: 位置(${sourceX},${sourceY}) 尺寸(${width}x${height})`);
        }

        // 创建canvas
        const canvas = document.createElement("canvas");
        canvas.width = width * pixelRatio;
        canvas.height = height * pixelRatio;
        const ctx = canvas.getContext("2d");
        if (!ctx) throw new Error("无法获取canvas上下文");

        // 清除canvas（确保透明背景）
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 绘制图标（精确裁剪）
        ctx.imageSmoothingEnabled = false;
        ctx.drawImage(
          img,
          sourceX,
          sourceY,
          width,
          height, // 源图像区域（应用偏移）
          0,
          0,
          canvas.width,
          canvas.height // 目标canvas区域
        );

        // 调试边框（可选）
        if (options.debugBorder) {
          ctx.strokeStyle = "red";
          ctx.lineWidth = 1;
          ctx.strokeRect(0, 0, canvas.width, canvas.height);
        }

        // 添加到地图
        try {
          map.addImage(iconName, {
            width: width,
            height: height,
            data: ctx.getImageData(0, 0, canvas.width, canvas.height).data,
            pixelRatio: pixelRatio
          });
        } catch (e) {
          console.error(`添加图标 ${iconName} 失败:`, e);
          throw e;
        }
      })
    );

    console.log(`成功加载 ${Object.keys(jsonData).length} 个图标`);
  } catch (error) {
    console.error("加载雪碧图失败:", error);
    throw error;
  }
}
